<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<a href="javascript:history.back();" class="back-button">
				<i class="fa fa-arrow-left"></i> 返回
			</a>
			<p>用户登录</p>
		</header>

		<!-- 表单部分 -->
		<ul class="form-box">
			<li>
				<div class="title">
					手机号码：
				</div>
				<div class="content">
					<input type="text" v-model="userId" placeholder="手机号码">
				</div>
			</li>
			<li>
				<div class="title">
					密码：
				</div>
				<div class="content">
					<input type="password" v-model="password" placeholder="密码">
				</div>
			</li>
		</ul>

		<div class="button-login">
			<button @click="login">登录</button>
		</div>
		<div class="button-register">
			<button @click="register">去注册</button>
		</div>
		<CustomAlert ref="customAlert" />
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import CustomAlert from '../components/CustomAlert.vue';

export default {
	name: 'Login',
	data() {
		return {
			userId: '',
			password: ''
		}
	},
	methods: {
		login() {
			if (this.userId == '') {
				this.$refs.customAlert.showAlert('手机号码不能为空！');
				return;
			}
			if (!/^1[356789]\d{9}$/.test(this.userId)) {
				this.$refs.customAlert.showAlert('请填入正确的手机号码！');
				return;
			}
			if (this.password == '') {
				this.$refs.customAlert.showAlert('密码不能为空！');
				return;
			}

			//登录请求
			this.$axios.get(`Users/userId/${this.userId}/password/${this.password}`)
				.then(response => {
					let user = response.data;
					if (user == null || user == '') {
						this.$refs.customAlert.showAlert('用户名或密码不正确！');
					} else {
						//sessionstorage有容量限制，为了防止数据溢出，所以不将userImg数据放入session中
						user.userImg = '';
						this.$setSessionStorage('user', user);
						this.$setSessionStorage('user.isBusiness', response.data.isBusiness);
						console.log('是否为商家：',response.data);
						this.$router.go(-1);
					}
				}).catch(error => {
					console.error(error);
				});
		},
		register() {
			this.$router.push({ path: 'register' });
		}
	},
	components: {
		Footer,
		CustomAlert
	}
}
</script>


<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

.back-button {
	position: absolute;
	top: 3.5vw;
	/* 使用相对单位 */
	left: 2.5vw;
	/* 使用相对单位 */
	font-size: 4vw;
	/* 使用相对单位 */
	text-decoration: none;
	color: white;
	display: flex;
	align-items: center;
}

.back-button i {
	margin-right: 1vw;
	/* 使用相对单位 */
}

/* 针对大屏幕 (如 iPad) 的媒体查询 */
@media (min-width: 768px) {
	.wrapper header {
		height: 8vh;
		/* 使用相对高度单位 */
		font-size: 3vh;
	}

	.back-button {
		position: absolute;
		top: 3.5vw;
		/* 使用相对单位 */
		left: 2.5vw;
		/* 使用相对单位 */
		font-size: 4vw;
		/* 使用相对单位 */
		text-decoration: none;
		color: white;
		display: flex;
		align-items: center;
	}

	.back-button i {
		margin-right: 1vw;
		/* 使用相对单位 */
	}

	/* 针对大屏幕 (如 iPad) 的媒体查询 */
	@media (min-width: 768px) {
		.wrapper header {
			height: 8vh;
			/* 使用相对高度单位 */
			font-size: 3vh;
		}

		.back-button {
			top: 2.5vh;
			/* 使用相对高度单位 */
			left: 2vh;
			font-size: 2.5vh;
			/* 相对大小单位 */
		}

		.back-button i {
			margin-right: 0.5vh;
		}
	}

	/****************** 表单部分 ******************/
	.wrapper .form-box {
		width: 100%;
		margin-top: 10vw;
	}

	.back-button i {
		margin-right: 0.5vh;
	}
}

/****************** 表单部分 ******************/
.wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
}

.wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
	display: flex;
	align-items: center;
}

.wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}

.wrapper .form-box li .content {
	flex: 1;
}

.wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
}

.wrapper .button-login {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38CA73;
	border-radius: 4px;

	border: none;
	outline: none;
}

.wrapper .button-register {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	/*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
	color: #666;
	background-color: #EEE;
	border: solid 1px #DDD;
	border-radius: 4px;

	border: none;
	outline: none;
}

/****************** 底部菜单部分 ******************/
.wrapper .footer {
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	background-color: #fff;

	position: fixed;
	left: 0;
	bottom: 0;

	display: flex;
	justify-content: space-around;
	align-items: center;
}

.wrapper .footer li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	color: #999;
	user-select: none;
	cursor: pointer;
}

.wrapper .footer li p {
	font-size: 2.8vw;
}

.wrapper .footer li i {
	font-size: 5vw;
}
</style>